<template>
    <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <template v-for="(item, index) in breakList">
            <el-breadcrumb-item :to="item.path">{{ item.meta.title
            }}</el-breadcrumb-item>
        </template>
    </el-breadcrumb>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';
import { ref, watch } from "vue";
const route = useRoute()
const breakList = ref<any[]>([])
const getBreakList = () => {
    breakList.value = route.matched.filter(
        item => item.meta && item.meta.title
    )
    console.log(breakList)
}
// getBreakList()
watch(route, () => {
    getBreakList()
}, {
    //当 watch 一个变量的时候，初始化时并不会执行,需要在created的时候手动调用一次。
    //添加immediate属性，这样初始化的时候也会触发
    immediate: true
})

</script>

<style scoped>
.breadcrumb {
    line-height: 50px;
}
</style>